<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            height: 500px;
            width: 500px;
            margin: 80px auto;
        }

        ul {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            padding: 10px;
        }

        ul li {
            height: 50px;
            width: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
        }

        .box1,
        .box2 {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box">
    </div>

    <script>
        var arr = ['万象更新', '抱头鼠窜', '鸡鸣狗盗', '千军万马', '亡羊补牢', '杯弓蛇影', '鹤立鸡群',
            '对牛弹琴', '如鱼得水']
        var str = '';
        for (let i = 0; i < arr.length; i++) {
            str = str + arr[i]
        }
        var box = document.querySelector('.box');
        for (let i = 0; i < 6; i++) {
            box.innerHTML += `
            <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            </ul>`
        }
        function daluan() {
            var arr = [];//存放随机数的数组
            for (let j = 0; j < 1000; j++) {
                var radomNum = parseInt(Math.random() * 36);//生成范围内的数据数
                if (arr.indexOf(radomNum) == -1) {
                    //indexOf返回值为-1表示数组中没有和新随机数重复的值
                    arr.push(radomNum);
                    if (arr.lenght == 36) break;
                }
            }
            return arr;
        }
        var num = daluan();
        var lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[num[i]].innerText = `${str[i]}`;
        }
        var box1 = document.querySelector('.box1');
        var jishuqi = 0;
        box1.innerText = arr[jishuqi];
        var result = '';
        var box2 = document.querySelector('.box2');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                console.log(lis[i].innerText);
                result += lis[i].innerText;
                console.log(result);

                box2.innerText = result;
                if (result.length == 4) {
                    if (result === box1.innerText) {
                        alert('正确');
                        jishuqi++;
                    } else {
                        alert('错误')
                        jishuqi++;
                    }
                    box1.innerText = arr[jishuqi];
                    for (let j = 0; j < arr.length; j++) {
                        box2.innerText = '';
                        result = '';
                    }
                }
            }
        }

    </script>
</body>

</html>